/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import LinearGradient from "react-native-linear-gradient" ;
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,
        LinearGradient,TextInput,Image,AsyncStorage
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.headerTop}>
            <Text style={styles.topLeft}>
                取消
            </Text>
            <Text style={styles.headerTopCenter}>
                重置密码
            </Text>
        </View>
        <View>
            <TextInput placeholder="请输入新密码" style={styles.newPasswordOne}>

            </TextInput>
            <Image source={require()} style={styles.sourceImg}/>
        </View>
        <View>
            <TextInput placeholder="再次确定密码" style={styles.newPasswordOne}>

            </TextInput>
            <Image source={require()} style={styles.sourceImg}/>
        </View>
        <LinearGradient color={['#37C5EB', '#4CA1EE', '#6080F1']} style={{height:150}}>
            <Text style={{textAlign:"center"}}>确定</Text>
        </LinearGradient>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
  headerTop:{
      marginTop:10,
  },
  topLeft:{
      color:"#3BBFEB",
      fontSize:16,
      justifyContent:"flex-start",
      marginLeft:10,
      marginTop:10,
  },
  headerTopCenter:{
      fontSize:30,
      justifyContent:"center",
      textAlign:"center"
  },
  newPasswordOne:{
    textAlign:"left",
    color:"#C6C6C6",
  },
  sourceImg:{
      position:"absolute",
      right:5,
      top:5,
  }
});
